How To Deploy Your Hugo Site to Kinsta for Free

Hugo is a popular open-source Static Site Generator (SSG) designed to help developers build and manage websites quickly and efficiently. It can be used to create blogs, portfolios, and all forms of personal websites that do not require dynamic data.

When you build sites with Hugo, you’d definitely want to host them online so you can share them with all those who need to access them. This is where Kinsta’s Static Site Hosting comes in!

Kinsta Static Site Hosting is a free service dedicated to hosting static sites. It does this by serving pre-built HTML, CSS, and JavaScript files that don’t change dynamically. It works by connecting a repository hosted on a Git provider (BitBucket, GitHub, or GitLab) to your Kinsta account and deploying your static site files to the internet.

Kinsta’s Static Site Hosting can automatically build sites from SSGs built on top of Node.js, while for others like Hugo, written in Go programming language (Golang), you’d need to devise another approach.

This article explains how to host your Hugo site to Kinsta for free with Kinsta’s Static Site Hosting!

There are three ways to deploy your Hugo site to Kinsta Static Site Hosting:

In this article, we go through all of them.

To follow along with this tutorial, we assume you have:

If you want to learn more about Hugo, we recommend reading the article “How To Build a Blazing Fast Static Site With Hugo“.

For the first method, let us use CircleCI as the CI/CD tool. This method involves creating a CircleCI workflow that builds your Hugo site into a new branch named deploy and then configuring Kinsta to deploy the static files from this branch.

With this method, you can avoid the need to locally build your site before pushing it to your Git repository. Normally, Kinsta handles the site-building process for SSGs that are based on Node.js, but for other SSGs like Hugo, using a workflow can help handle the site-building process automatically.

Additionally, you can add other jobs to your CI/CD configuration file, for example, to lint and test your code. You also guarantee that your deployment is only updated if the CI/CD pipeline is completed successfully.

Begin by creating a .circleci folder in your Hugo project’s root directory. Inside this folder, create a config.yml file to define your workflow’s configuration.

Create a Git repository using your preferred Git provider and push your code to the repository.

Next, create an empty orphan branch called deploy, where the static files for deployment will be pushed. Execute the following commands in your project’s terminal:

Do not add any files to this branch; it will be automatically populated by the CircleCI workflow with the contents of Hugo’s generated public folder.

Visit the CircleCI website and create an account if you don’t already have one. You can sign up using your preferred Git provider, which makes it easier to access your repositories without further configuration.

After logging in, go to your CircleCI dashboard, click Projects on the left sidebar, and select the repository you want to configure. CircleCI will automatically detect your configuration file.

Click the Set Up Project button to grant CircleCI access to your codebase and execute workflows upon code changes.

You now have a CircleCI configuration file created. Let’s build its content. Ensure you’re in your default branch (not in the deploy branch) and start by defining the CircleCI version, which currently is 2.1:

Since this is a Hugo project, you’d need to define an executor to run the jobs. Define the hugo-executor here so you don’t have to define it for every job. This executor uses a Docker image (cibuilds/hugo:latest) to create a consistent environment for building the Hugo site:

Next, define two jobs: build and push build. These jobs specify the steps to be executed in each job:

This job is responsible for building your Hugo site and storing the static files generated in the workspace temporarily so they can be accessible for later use in the push build job.

The job above specifies that it uses the hugo-executor executor defined earlier. And then runs four major steps:

The push build job is responsible for pushing the built site to an orphan branch (deploy) in your GitHub repository. This way, your code remains on the default branch, and the deploy branch hosts only your site’s static files.

The job above does the following:

Make sure to replace and with your actual GitHub username and repository name. Also, ensure you create a GitHub access token so that CircleCI can access your GitHub account.

Then, add the token as an environment variable named GITHUB_TOKEN in your CircleCI Project Settings.

With your jobs set up, the next phase involves configuring your workflow. Continuing your CircleCI configuration, create a workflow that triggers the build job when there are code changes on the main branch and requires the build job to complete successfully before running the push build job:

Once your workflow is successfully configured, commit and push your changes to your Git repository. CircleCI automatically detects the presence of the configuration file and triggers your defined workflows upon code changes.

When you check your GitHub repository, the deploy branch already has the public folder, which contains the static files.

You can crosscheck the complete CircleCI configuration in this sample repository.

Deployment to Kinsta happens in just seconds, especially now that the static files are already built. Follow these steps to deploy your Hugo site for free with Static Site Hosting:

And that’s it! You now have a deployed site within a few seconds. A link is provided to access the deployed version of your site. You can later add your custom domain and SSL certificate if you wish.

The Hugo-bin package is a binary wrapper for Hugo. It makes it possible for you to build and serve your Hugo project with Node.js commands. This method doesn’t need a CI/CD tool to build your site before deploying it to Kinsta Static Site Hosting.

To use the Hugo-bin package in your Hugo project:

With this, Kinsta would be able to build and serve your Hugo site without you needing to build your files before deploying.

Using Git submodules with our Static Site Hosting and Application Hosting isn’t currently possible. Ensure you add your theme files locally in your Git repository for it to work with Kinsta.

Once all is done, push your code to your Git repository. Follow these steps to deploy your static site to Kinsta:

And that’s it! You now have a deployed site within a few seconds.

When you use the Hugo-bin package, you can also deploy your site using our Application Hosting service. This can prove to be highly beneficial as you benefit from the advanced features available to our Application Hosting. For example, scalability, customized deployment using a Dockerfile, and comprehensive analytics encompassing real-time and historical data.

Finally, another method for deploying your Hugo site to Kinsta involves building your site locally and then deploying it to Kinsta. This process generates a public folder at the root of your project. However, the main disadvantage of using this method is that you have to build your site locally before every push, which can be time-consuming and less convenient compared to other methods that automate the site-building process.

By default, the public folder is excluded from your Git repository due to its inclusion in your .gitignore file. To include it in your repository and deploy your site to Kinsta:

Alternatively, you can choose to push only the static files to your GitHub repository. For this approach, there’s no need to initialize a Git repository in the root folder of your project. You only need to run git init within the public folder. This allows you to keep the version control for your static files separate from the rest of your project.

In this scenario, when pushing the files separately without placing them within a public folder, specify the Publish directory as . when deploying to Kinsta. This notation represents the root folder, and Kinsta will serve the files accordingly.

This article has explained three effective methods for deploying your Hugo site for free on Kinsta’s Static Site Hosting platform. You have the flexibility to choose the method that aligns best with your specific requirements. Additionally, for in-depth insights on creating a lightning-fast static site using Hugo, read our comprehensive guide.

Get all your applications, databases, and WordPress sites online and under one roof. Our feature-packed, high-performance cloud platform includes:

Get started with a free trial of our Application Hosting or Database Hosting. Explore our plans or talk to sales to find your best fit.

Joel is a Frontend developer working at Kinsta as a Technical Editor. He is a passionate teacher with love for open source and has written over 200 technical articles majorly around JavaScript and it's frameworks.